<template>
  <div class="headArea">
    <van-nav-bar
      class="NavBar"
      @click-left="$router.push(path)"
      @click-right="$emit('rightClick')"
    >
      <!-- 中间内容 -->
      <template #title>
        <div class="title">
          {{ title }}
        </div>
      </template>
      <!-- 退出icon -->
      <template #left v-if="showIcon">
        <i class="iconfont f44">&#xe637;</i>
      </template>
      <!-- 右边内容 -->
      <template #right v-if="right">
        <div class="right">
          {{ right }}
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  // props: ['title', 'path','right','showIcon']
  name: 'subnavbar',
  props: {
    title: {
      type: String
    },
    path: {
      type: String
    },
    right: {
      type: String
    },
    showIcon: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
.NavBar {
  position: relative;
  .van-nav-bar__left {
    .f44 {
      font-size: 44px;
      opacity: 1;
      position: absolute;
      left: 20px;
    }
  }
}
::v-deep div.van-nav-bar__left,
::v-deep div.van-nav-bar__content {
  padding: 0;
}
.right {
  padding-right: @p15;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: right;
  color: #181a39;
  line-height: 20px;
  letter-spacing: 0px;
}
</style>
